<template>
  <div style="height: 100%;">
    <vue-nav />
    <vue-table />
  </div>
</template>

<script>
import vueNav from '@/components/VueNav';
import vueTable from '@/components/VueTable';

export default {
  name: 'trading-right-top',
  data() {
    return {
      search: '',
      zixuan: {
        active: 0,
        menu: [
          {
            name: 'BTC',
            value: 0,
          },
          {
            name: 'ETH',
            value: 1,
          },
          {
            name: 'BNB',
            value: 2,
          },
          {
            name: 'USDT',
            value: 3,
          },
        ],
      },
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: ''
    };
  },
  components: {
    vueTable,
    vueNav
  },
  created() {
  },
  mounted() {
  },
  methods: {
    // 切换自选
    handleZiXuanActive(value) {
      this.zixuan.active = value;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/variables.scss";

.btbox {
  padding:8px 5px 0;
}

.btboxbg {
  background: $-topcolorf7;
}

.tl {
  padding: 5px 0;
  span {
    flex: 1;
    text-align: center;
  }
  border-bottom: 1px solid rgba(0, 0, 0, .05);
}

.ximg {
  a {
    display: block;
    padding: 3px;
    margin: 0 5px 0 0;
    border: 1px solid rgba(0, 0, 0, 0);
    img {
      display: block;
      vertical-align: top;
    }

    &.active, &:hover {
      border: 1px solid rgba(0, 0, 0, .2);
    }
  }
}
.theme-1B1D27 {
  .btboxbg {
    background: $-topcolor2;
  }
  .box-shadow {
    border: 1px solid rgba(0, 0, 0, .1);
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.3);
    background: $-topcolor;
  }
  .topcolor {
    background: $-topcolor;
  }
  .topc {
    background: $-topcolor3;
  }
  .ximg {
    a {
      &.active, &:hover {
        border: 1px solid #4e5b85;
      }
    }
  }
  .color-fff {
    color: rgba(255, 255, 255, .8);
  }
}

.blist {
  padding: 5px 0;
  .ltd {
    padding: 2px 0;
    span {
      flex: 1;
      text-align: center;
    }
  }
}

.overflowbox {
  height: 77%;
  overflow: auto;
}

.tccob {
  padding: 5px;

  strong {
    font-size: 20px;
  }

  span {
    vertical-align: bottom;
  }

  i {
  }
}

.color-999 {
  color: #999;
}
.color-sl {
  color: #67C269;
}
.color-sr {
  color: #EE1443;
}
.color-fff {
  color: rgba(0, 0, 0, .7);
}

.minibtn {
  .el-button {
    padding: 2px 5px;
  }
}
.el-button.active {
  color: #fff;
  border-color: $-main-color;
  background-color: $-main-color;
}
</style>

